<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            .red {
                background: red;
            }


        </style>
    </head>
    <body>
        <div id="box" data-abc="567" abc="333"></div>
        <input type="text" name="waige" value="111">  
        <img src="ceshi" alt="">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <input type="radio" id="radio" checked>

        <input type="text" value="你好" id="hello">

        <div class="input">
            <input type="checkbox" value="apple">
            <input type="checkbox" value="orange">
            <input type="checkbox" value="banana">
            <input type="checkbox" value="melon">

        </div>
    </body>
</html>
<script src="jquery.min.js"></script>
<script>
    
    // console.log($('#box').attr('data-abc'));
    // $('#box').attr('data-num', 100);

    // $('#box').attr({
    //     "data-num": 100,
    //     "data-value": "hello"
    // });

    // $('ul>li').attr('data-num', '1');

    // $('ul>li').attr('data-num', function(index, attr) {
    //     return index;
    // }).attr('id', function(index, attr) {
    //     return "li" + index;
    // });

    // $('#box').removeAttr('data-abc');

    // console.log($('#box').prop('data-abc'));
    // console.log($('#box').prop('id'));
    // console.log($('img').prop('src'));
    // console.log($('img').attr('src'));

    // console.log($('#box').prop('abc'));
    // console.log($('#box').attr('abc'));


    // $('#radio').attr('checked', '');
    // $('#radio').prop('checked', '');

    // console.log($('#radio').attr('checked'));
    // console.log($('#radio').prop('checked'));

    // $('ul>li').click(function() {
    //     $('ul>li').removeClass('red');
    //     $(this).addClass('red');
    // });

    // $('ul>li').click(function() {
    //     // $(this).toggleClass('red', true);
    // });

    // console.log($('ul>li').html());
    // $('ul>li').html('hello');

    // $('ul>li').html(function(index, html) {
    //     // console.log(index, html);
    //     return html + ", hello";
    // });

    // console.log($('ul>li').text());

    // console.log($('#hello').val());

    $('.input>input').val(['apple', 'orange'])

</script>